<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>铜丝空闲盘智能分选</title>
    <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">智能分选</div>

            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                        <p>文智伟</p>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="My.html">个人信息</a></dd>
                        <dd><a href="Login.html">退出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="MyHome.html">首页</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="Person.html">人员管理</a>
                    </li>
                    <li class="layui-nav-item"><a href="Work.html">问题反馈</a></li>
                    <li class="layui-nav-item"><a href="My.html">个人信息</a></li>
                    <li class="layui-nav-item"><a href="mypaner.html">员工手册</a></li>
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">

                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>
    </div>
    <script src="../layui-v2.6.8/layui/layui.js"></script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
          <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
      </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">了解/删除</a>
      </script>
    <script>
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                }
                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#test'

                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '用户数据表'
                , cols: [[ //标题栏
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'id', title: 'ID', width: 80, sort: true, align: 'center' }
                    , { field: 'username', title: '用户名', width: 80, align: 'center' }
                    , { field: 'work', title: '工种', width: 90, align: 'center' }
                    , { field: 'email', title: '邮箱', minWidth: 50, align: 'center' }
                    , { field: 'tel', title: '手机号', minWidth: 50, align: 'center' }
                    , { field: 'sex', title: '性别', width: 80, align: 'center' }
                    , { field: 'city', title: '种类', width: 100, align: 'center' }
                    , { field: 'questionOne', title: '您希望我们在哪些地方做出优化与改善', minWidth: 270, align: 'center' },
                    {
                        field: 'questionTwo', title: '车间管理问题存在哪些问题', minWidth: 250, align: 'center'
                    }, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 80, align: 'center' }
                ]],
                data: [{
                    "id": "10001"
                    , "username": "杜甫"
                    , "work": "出库人员"
                    , "email": "test@email.com"
                    , "sex": "男"
                    , "city": "设备问题"
                    , "tel": "1535635151"
                    , "questionOne": "这里是放问题的答案的",
                    "questionTwo": "这里是放问题的答案的"
                }, {
                    "id": "10002"
                    , "username": "李白"
                    , "work": "出库人员"
                    , "email": "test@email.com"
                    , "sex": "男"
                    , "city": "设备问题"
                    , "tel": "1535635151"
                    , "questionOne": "这里是放问题的答案的",
                    "questionTwo": "这里是放问题的答案的"
                }, {
                    "id": "10003"
                    , "username": "王勃"
                    , "work": "出库人员"
                    , "email": "test@email.com"
                    , "sex": "男"
                    , "city": "设备问题"
                    , "tel": "1535635151"
                    , "questionOne": "这里是放问题的答案的",
                    "questionTwo": "这里是放问题的答案的"
                }, {
                    "id": "10004"
                    , "username": "贤心"
                    , "work": "出库人员"
                    , "email": "test@email.com"
                    , "sex": "男"
                    , "city": "设备问题"
                    , "tel": "1535635151"
                    , "questionOne": "这里是放问题的答案的",
                    "questionTwo": "这里是放问题的答案的"
                }, {
                    "id": "10005"
                    , "username": "贤心"
                    , "work": "出库人员"
                    , "email": "test@email.com"
                    , "sex": "男"
                    , "city": "设备问题"
                    , "tel": "1535635151"
                    , "questionOne": "这里是放问题的答案的",
                    "questionTwo": "这里是放问题的答案的"
                }, {
                    "id": "10006"
                    , "username": "贤心"
                    , "work": "出库人员"
                    , "email": "test@email.com"
                    , "sex": "男"
                    , "city": "设备问题"
                    , "tel": "1535635151"
                    , "questionOne": "这里是放问题的答案的",
                    "questionTwo": "这里是放问题的答案的"
                }, {
                    "id": "10007"
                    , "username": "贤心"
                    , "work": "出库人员"
                    , "email": "test@email.com"
                    , "sex": "男"
                    , "city": "设备问题"
                    , "tel": "1535635151"
                    , "questionOne": "这里是放问题的答案的",
                    "questionTwo": "这里是放问题的答案的"
                }, {
                    "id": "10008"
                    , "username": "贤心"
                    , "work": "出库人员"
                    , "email": "test@email.com"
                    , "sex": "男"
                    , "city": "设备问题"
                    , "tel": "1535635151"
                    , "questionOne": "这里是放问题的答案的",
                    "questionTwo": "这里是放问题的答案的"

                }]
                , page: true
                , limits: [8]
                , limit: 8 //每页默认显示的数量
                , even: true
            });

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('自定义按钮');
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('是否了解该反馈?', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.prompt({
                        formType: 2
                        , value: data.email
                    }, function (value, index) {
                        obj.update({
                            email: value
                        });
                        layer.close(index);
                    });
                }
            });
        });

    </script>

</body>

</html>